import { Tag } from "@alifd/next";
import { Radio } from "@alifd/next";
import { useState } from "react";
const RadioGroup = Radio.Group;
export default function ChooseFeel(props: {
    value: number,
    onChange: any
}) {
    const list = [
        {
            value: 0,
            label: '平静',
            color: null
            // 'blue', 'green', 'orange', 'red', 'turquoise', 'yellow'
        },
        {
            value: 1,
            label: '开心',
            color: 'blue'
            // 'blue', 'green', 'orange', 'red', 'turquoise', 'yellow'
        },
        {
            value: 2,
            label: '恐慌',
            color: 'green'
        },
        {
            value: 3,
            label: '难受',
            color: 'orange'
        },
        {
            value: 4,
            label: '激动',
            color: 'turquoise'
            // 'blue', 'green', 'orange', 'red', 'turquoise', 'yellow'
        },
    ];
    const [show, setShow] = useState(false);
    return <div style={{
        width: '100%',
    }} onMouseEnter={() => {
        setShow(true);
    }} onMouseLeave={() => {
        setShow(false);
    }}>
        {
            list.map(item => {
                if (show || item.value == props.value) {
                    return <Tag {...{
                        [item.color ? 'color': 'a']: item.color,
                        // [item.value == props.value ? 'size' : 'b']: 'large'
                    }} style={{
                        marginRight: '10px'
                    }} onClick={() => {
                        setTimeout(() => {
                            props.onChange(item.value);
                        }, 0);
                    }}>{item.label}</Tag>
                } else {
                    return null;
                }
            })
        }
        
    </div>
}